<template>
  <div class="user-stat">

    <h3 class="heading">打卡 记录</h3>
    <stat-circle :info="user.info" :max="user.drinkingTarget"/>

    <h3 class="heading">本周 记录</h3>
    <h2 class="heading2">----- 喝水量 -----</h2>
    <bar-chart class-name="barChart1" ref="barChart1" :x-data="week" :s-data="sData" :title="'这是你 ʚ本周ɞ 的喝水量情况统计'"
               :subtitle="'This Week'"></bar-chart>
    <h2 class="heading2">----- 喝水次数 -----</h2>
    <PieChart ref="pieChart" :info="user.info"></PieChart>

    <h3 class="heading">上周 记录</h3>
    <h2 class="heading2">----- 喝水量 -----</h2>
    <bar-chart class-name="barChart2" ref="barChart2" :x-data="week" :s-data="user.lastWeekDrink"
               :title="'这是你 ʚ上周ɞ 的喝水量情况统计'" :subtitle="'Last Week'"></bar-chart>


  </div>
</template>

<script>
import {mapState} from 'vuex'
import StatCircle from './StatCircle.vue'
import PieChart from '@/components/echart/pieChart.vue'
import {WEEK_AXIS} from "@/helper/share";
import BarChart from "@/components/echart/barChart";

export default {
  components: {
    BarChart,
    StatCircle,
    PieChart
  },
  props: {},
  computed: {
    ...mapState(['user']),
    sData() {
      return this.user.info.map(value => {
        return Math.floor(value.drink);
      })
    },
    week() {
      return WEEK_AXIS;
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.$refs.pieChart.initChart()
    this.$refs.barChart1.initChart()
    this.$refs.barChart2.initChart()
  },
}
</script>

<style lang="less">
.user-stat {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  perspective: 1900px;

  .stat {
    transform-origin: bottom;
    transform-style: preserve-3d;
  }

  .heading2 {
    opacity: 1;
    padding: 6px 0px;
    font-weight: 400;
    font-size: 15px;
    text-align: center;
  }

  .heading {
    opacity: 1;
    padding: 16px 30px 8px 30px;
    font-weight: 600;
    font-size: 18px;
  }
}
</style>
